import { createRouter, createWebHashHistory } from 'vue-router'
/**
 * 1.导入组件
 * 2.在riuter 中配置 : {path :'/', component :Layout}
 * @returns
 */
// 导入人公共结构
const Layout = () => import('../views/Layout/index.vue')
// 导入首页
const Home = () => import('../views/Home/index.vue')
// 分类页面
const TopCategory = () => import('../views/Category/index.vue')
const SubCategory = () => import('../views/Category/sub.vue')
const Goods = () => import('../views/Goods/index.vue')
// 登录页面
const Login = () => import('../views/Login/index.vue')
// qq登录成功后回跳的页面
const LoginCallBack = () => import('../views/Login/callback.vue')
// 购物车
const Cart = () => import('../views/Cart/index.vue')
// 下单组件
const Settlement = () => import('../views/Member/settlement/index.vue')
// 订单列表
const Order = () => import('../views/Member/order/index.vue')
// 结算页面
const Pay = () => import('@/views/Member/pay/index')
// 结算回调页面
const PayResult = () => import('@/views/Member/pay/result')
const routes = [
  {
    path: '/',
    component: Layout,
    children: [
      // 首页
      { path: '/', component: Home },
      // 一级分类页面
      { path: '/category/:id', component: TopCategory },
      // 二级分类页面
      { path: '/category/sub/:id', component: SubCategory },
      //  shangpin xiangqing
      { path: '/goods/:id', component: Goods },
      // 购物车
      { path: '/cart', component: Cart },
      // 结算
      { path: '/settlement', component: Settlement },
      // 订单列表
      { path: '/order', component: Order },
      // 支付页面
      { path: '/pay', component: Pay },
      { path: '/pay/callback', component: PayResult }
    ]
  },
  { path: '/login', component: Login },
  { path: '/login/callback', component: LoginCallBack }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes,
  // 路由切換會停留在上個頁面的滾動位置
  // 解決 : 创建路由實例的時候,加入scrollBechavior方法
  // v2 : {x : 0 , y: 0}
  // v3 : { top: 0, left: 0}
  scrollBehavior () {
    return { top: 0, left: 0 }
  }
})

export default router
